import { View, Text, StyleSheet, Image, TouchableOpacity, Button, ScrollView } from 'react-native';

import { ThemedText } from '@/components/ThemedText'
import { ThemedView } from '@/components/ThemedView'
import { useRouter } from 'expo-router'
import useResponsive from '@/rem/rem'
import { LinearGradient } from 'expo-linear-gradient';
import AntDesign from '@expo/vector-icons/AntDesign';
import { useNavigation } from '@react-navigation/native';
import axios  from 'axios';
import { useEffect,useState } from 'react';
export default function MyScreen() {
  const navigation = useNavigation();
  const { w, h, fs } = useResponsive()
  const styles = StyleSheet.create({
    container: {
    },
    iconContainer: {
      width: w(40),
      height: h(40),
      marginTop: h(20),
      position: 'fixed',
      right: w(-320),
      backgroundColor: 'rgba(15, 15, 15, 0.5)',
      borderRadius: 10, // 设置圆角半径
      alignItems: 'center',
      justifyContent: 'center',

    },
    tinyLogo: {
      width:  80,
      height: 80,
      borderRadius: 80,
    },
    imgbox: {
      width: w(355),
      margin: h(10),
      height: h(100),
      backgroundColor: 'transparent',
      flexDirection: 'row',
    },
    you: {
      flexDirection: 'row', // 让子元素在同一行内排列
      justifyContent: 'space-between', // 子元素之间有间隔
      alignItems: 'center', // 确保垂直居中对齐
      backgroundColor: 'transparent',
      height: h(40),

    },
    youbox: {
      width: 100,
      height: 30,
      backgroundColor: 'rgb(76, 59, 51)',
      borderRadius: 20,
      textAlign: 'center',
      lineHeight: 30,
      marginRight: 10,
      marginTop: 10,
      color: 'rgb(214, 199, 176)',
    },
    petCard: {
      width: w(355),
      margin: h(10),
      backgroundColor: '#fff',
      borderRadius: 10,
      padding: 20,
      marginVertical: 10,
      shadowColor: '#000',
      shadowOffset: {
        width: 0,
        height: 2,
      },
      shadowOpacity: 0.25,
      shadowRadius: 3.84,
      elevation: 5,
    },
    petCardTitle: {
      fontSize: 18,
      fontWeight: 'bold',
      marginBottom: 10,
    },
    petCardContent: {
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom: 20,
    },
    petCardImage: {
      width: 60,
      height: 60,
      marginBottom: 10,
    },
    petCardTextContainer: {
      flex: 1, // 让文本容器占据剩余的空间
    },
    petCardText: {
      fontSize: 16,
      flexWrap: 'wrap', // 确保文本可以换行
    },
    petCardButton: {
      width: w(120),
      marginTop: h(10),
      backgroundColor: '#ff4d4f',
      borderRadius: 20,
      paddingVertical: 10,
      paddingHorizontal: 20,
      alignItems: 'center',
    },
    petCardButtonText: {
      color: '#fff',
      fontSize: fs(15),
    },

    orderscontainer: {
      width: w(355),
      margin: h(10),
      backgroundColor: '#fff',
      borderRadius: 10,
      padding: 20,
      marginVertical: 10,
      shadowColor: '#000',
      shadowOffset: {
        width: 0,
        height: 2,
      },
      shadowOpacity: 0.25,
      shadowRadius: 3.84,
      elevation: 5,
    },
    orderText: {
      fontSize: 18,
      fontWeight: 'bold',
      marginBottom: 10,
    },
    statusContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-around',
      marginTop: 10,
    },
    statusItem: {
      alignItems: 'center',
    },
    icon: {
      width:25,
      height: 25,


    },
    statusText: {
      fontSize: 16,
      color: '#333',
      marginTop: 5,
    },
  })
  const router = useRouter()
const [id,setid]= useState('677f8a026b8f7fa143a658de')
const [user,setuser]= useState([])
console.log(user);

const userData= async()=>{
  const {data:{data}}=await axios.get(`http://192.168.1.18:3000/user?id=${id}`)
  console.log(data);
  if(data.length>0){
    setuser(data)
  }else{
    setuser([])
  }
 
  
}
useEffect(()=>{
  userData()
},[])

  return (
    <ThemedView style={styles.container} >
      <ScrollView >
        <ThemedView  >
          <LinearGradient
            style={[styles.header, { padding: 0 }]}
            colors={['rgb(245, 226, 212)', '#f3f3f3']}>
            <ThemedView style={styles.iconContainer}>
              <AntDesign name="setting" size={30} color="white" onPress={() => router.push('/setting/set')}/>
            </ThemedView>
            {
                  user.length >0? 
            <ThemedView style={styles.imgbox}>
              <Image
                style={[styles.tinyLogo, { justifyContent: 'center' }]}
                source={{
                  uri: user[0].img,
                }}
              />
              <ThemedView style={[{ justifyContent: 'center', marginLeft: w(10), backgroundColor: 'transparent' }]}>
                  <ThemedText style={{ fontSize: 20, fontWeight: 'bold' }}>{user[0].nick}</ThemedText>
                <ThemedView style={styles.you}><ThemedText style={styles.youbox}>优惠券：10</ThemedText><ThemedText style={styles.youbox}>积分：0</ThemedText></ThemedView>
              </ThemedView>
            </ThemedView>: 
            
            <ThemedView style={styles.imgbox}>
              <Image
                style={[styles.tinyLogo, { justifyContent: 'center' }]}
                source={{
                  uri:'https://ts3.cn.mm.bing.net/th?id=ODL.e5473b4a2eefbef03bef9024cb75644e&w=110&h=110&c=6&rs=1&qlt=90&o=6&dpr=1.3&pid=23.1',
                }}
              />
              <ThemedView style={[{ justifyContent: 'center', marginLeft: w(10), backgroundColor: 'transparent' }]}>
                  <ThemedText style={{ fontSize: 20, fontWeight: 'bold' }}>点击去登录</ThemedText>
                <ThemedView style={styles.you}><ThemedText style={styles.youbox}>优惠券：10</ThemedText><ThemedText style={styles.youbox}>积分：0</ThemedText></ThemedView>
              </ThemedView>
            </ThemedView> 
              }



            <ThemedView style={styles.petCard}>
              <ThemedText style={styles.petCardTitle}>我的宠物</ThemedText>

              <ThemedView style={styles.petCardContent}>
                <Image source={{ uri: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.w-RohJ230yQnz2pHM_1GFgHaLG?w=132&h=198&c=7&r=0&o=5&dpr=1.3&pid=1.7' }} style={styles.petCardImage} />
                <ThemedView style={styles.petCardThemedTextContainer}>
                  <ThemedText style={styles.petCardText}>审核通过送5元无门槛券</ThemedText>
                </ThemedView>
                <TouchableOpacity style={styles.petCardButton}>
                  <ThemedText style={styles.petCardButtonText} onPress={()=>{router.push('/')}}>添加宠物</ThemedText>
                </TouchableOpacity>
              </ThemedView>
            </ThemedView>

            <ThemedView style={styles.orderscontainer}>
              <ThemedText style={styles.orderText}>我的订单</ThemedText>
              <ThemedView style={styles.statusContainer}>

                <ThemedView style={styles.statusItem}>
                  <Image source={require('@/assets/hyx/1.png')} style={styles.icon} />
                  <ThemedText style={styles.statusText}>待付款</ThemedText>
                </ThemedView>
                <ThemedView style={styles.statusItem}>
                  <Image source={require('@/assets/hyx/2.png')} style={styles.icon} />
                  <ThemedText style={styles.statusText}>待发货</ThemedText>
                </ThemedView>
                <ThemedView style={styles.statusItem}>
                  <Image source={require('@/assets/hyx/3.png')} style={styles.icon} />
                  <ThemedText style={styles.statusText}>已发货</ThemedText>
                </ThemedView>
                <ThemedView style={styles.statusItem}>
                  <Image source={require('@/assets/hyx/4.png')} style={styles.icon} />
                  <ThemedText style={styles.statusText}>待评价</ThemedText>
                </ThemedView>
                <ThemedView style={styles.statusItem}>
                  <Image source={require('@/assets/hyx/5.png')} style={styles.icon} />
                  <ThemedText style={styles.statusText}>退款/仲裁</ThemedText>
                </ThemedView>
              </ThemedView>
            </ThemedView>


            <ThemedView style={styles.orderscontainer}>
              <ThemedText style={styles.orderText}>常用信息</ThemedText>
              <ThemedView style={styles.statusContainer}>
                <ThemedView style={styles.statusItem}>
                  <Image source={require('@/assets/hyx/21.png')} style={styles.icon} />
                  <ThemedText style={styles.statusText}>我的预约</ThemedText>
                </ThemedView>
                <ThemedView style={styles.statusItem}>
                  <Image source={require('@/assets/hyx/22.png')} style={styles.icon} />
                  <ThemedText style={styles.statusText}>我的收藏</ThemedText>
                </ThemedView>
                <ThemedView style={styles.statusItem}>
                  <Image source={require('@/assets/hyx/23.png')} style={styles.icon} />
                  <ThemedText style={styles.statusText}>浏览记录</ThemedText>
                </ThemedView>
                <ThemedView style={styles.statusItem}>
                  <Image source={require('@/assets/hyx/24.png')} style={styles.icon} />
                  <ThemedText style={styles.statusText} onPress={() => router.push('/address/showads')}>收货地址</ThemedText>
                </ThemedView>
              
              </ThemedView>
            </ThemedView>



            <ThemedView style={styles.orderscontainer}>
              <ThemedText style={styles.orderText}>买家必读</ThemedText>
              <ThemedView style={styles.statusContainer}>
                <ThemedView style={styles.statusItem}>
                  <Image source={require('@/assets/hyx/311.png')} style={styles.icon} />
                  <ThemedText style={styles.statusText}>购宠协议</ThemedText>
                </ThemedView>
                <ThemedView style={styles.statusItem}>
                  <Image source={require('@/assets/hyx/32.png')} style={styles.icon} />
                  <ThemedText style={styles.statusText}>凭条声明</ThemedText>
                </ThemedView>
                <ThemedView style={styles.statusItem}>
                  <Image source={require('@/assets/hyx/3333.png')} style={styles.icon} />
                  <ThemedText style={styles.statusText}>隐私政策</ThemedText>
                </ThemedView>
                <ThemedView style={styles.statusItem}>
                  <Image source={require('@/assets/hyx/34.png')} style={styles.icon} />
                  <ThemedText style={styles.statusText}>用户帮助</ThemedText>
                </ThemedView>
                
              </ThemedView>
            </ThemedView>

            <ThemedView style={styles.orderscontainer}>
              <ThemedText style={styles.orderText}>我的服务</ThemedText>
              <ThemedView style={styles.statusContainer}>
                <ThemedView style={styles.statusItem}>
                  <Image source={require('@/assets/hyx/41.png')} style={styles.icon} />
                  <ThemedText style={styles.statusText}>养宠顾问</ThemedText>
                </ThemedView>
                <ThemedView style={styles.statusItem}>
                  <Image source={require('@/assets/hyx/42.png')} style={styles.icon} />
                  <ThemedText style={styles.statusText}>意见反馈</ThemedText>
                </ThemedView>
                <ThemedView style={styles.statusItem}>
                  <Image source={require('@/assets/hyx/43.png')} style={styles.icon} />
                  <ThemedText style={styles.statusText}>卖家入驻</ThemedText>
                </ThemedView>
              </ThemedView>
            </ThemedView>
          </LinearGradient>
        </ThemedView>





        <Button title="退出登陆" onPress={() => {
          console.log('退出登陆');
          router.push('/login')
        }} />
      </ScrollView>
    </ThemedView>
  )
}


